<template>
<view >
  <navigator :url="isComment ?
  (comment?.rootCommentId == '' ||comment?.rootCommentId == null || comment?.rootCommentId == undefined ?
  `/pages/comment/indexPage?id=${comment.postId}&commentId=${comment.id}` : `/pages/comment/replyPage?id=${comment?.rootCommentId}&commentId=${comment.id}`)
  : `/pages/comment/index?id=${post.id}`"  style="margin: 10px;position: relative;background-color: rgba(192,192,192,0.17);padding: 10px;height: 120rpx;border-radius: 1rpx;display: flex;align-items: center;justify-content: space-between">
    <view  class="triangle">
    </view>
    <view v-if="isComment" style="display: flex;align-items: center">
      <image v-if="comment?.images?.length>0"
             :src="comment?.images?.split(',')[0] == '' ||
             comment?.images?.split(',')[0] == null ||
             comment?.images?.split(',')[0] == undefined ? comment?.images : comment?.images?.split(',')[0]"
             style="width: 100rpx;height: 100rpx;"></image>
      <view v-else style="display: flex;align-items: center;justify-content: center;width: 100rpx;height: 100rpx;background-color: #9acafc;border-radius: 4px">
        <view style="background-color: white;border-radius: 4px;width: 20px;height: 25px;;display: flex;justify-content: center;align-items: center;flex-direction: column">
          <view style="background-color: #9acafc;width: 10px;height: 2px;border-radius: 5px"></view>
          <view style="background-color: #9acafc;width: 10px;height: 2px;border-radius: 5px;margin: 3px 0"></view>
          <view style="background-color: #9acafc;width: 5px;height: 2px;border-radius: 5px"></view>
        </view>
      </view>
      <text  class="u-line-2" style="padding-left: 10rpx;color: rgba(0,0,0,0.34);font-size: 26rpx;font-weight: 530">
        {{comment.content}}
      </text>
    </view>
    <view  v-else style="display: flex;align-items: center">
      <image v-if="post?.images?.length>0"
             :src="post?.images?.split(',')[0] == '' ||
             post?.images?.split(',')[0] == null ||
             post?.images?.split(',')[0] == undefined ? post?.images : post?.images?.split(',')[0]"
             style="width: 100rpx;height: 100rpx;"></image>
      <view v-else style="display: flex;align-items: center;justify-content: center;width: 100rpx;height: 100rpx;background-color: #9acafc;border-radius: 4px">
        <view style="background-color: white;border-radius: 4px;width: 20px;height: 25px;;display: flex;justify-content: center;align-items: center;flex-direction: column">
          <view style="background-color: #9acafc;width: 10px;height: 2px;border-radius: 5px"></view>
          <view style="background-color: #9acafc;width: 10px;height: 2px;border-radius: 5px;margin: 3px 0"></view>
          <view style="background-color: #9acafc;width: 5px;height: 2px;border-radius: 5px"></view>
        </view>
      </view>
      <text class="u-line-2" style="padding-left: 10rpx;color: rgba(0,0,0,0.34);font-size: 26rpx;font-weight: 530">
        {{post.title}}
      </text>
    </view>
    <image src="https://www.douluodalu.icu:9000/school/static/right.png" style="height: 20rpx;width: 20rpx;"></image>
  </navigator>
  <view style="padding: 10px;">
    <text style="font-size: 30rpx;font-weight: 520">这些人赞了你的帖子</text>
  </view>
  <!--滚动列表内容-->
          <u-list  @scrolltolower="scrolltolower">
            <u-list-item
                v-for="(item, index) in indexList"
                :key="index">
              <navigator :url="`/pages/my/userInfo?id=${item.userId}`"  style="border: none;outline: none;padding: 10px;display: flex;align-items: center;">
                <u-avatar
                    shape="circle"
                    size="45"
                    :src="item.avatar"
                    customStyle="margin: -3px 5px -3px 0"
                ></u-avatar>
                <view style="font-size: 12px;margin-left: 10px;color: black">
                  {{item.userName}}&nbsp;&nbsp;
                </view>
                <image v-if="item.sex == 1" src="http://www.douluodalu.icu:9000/school/static/man.png" style="border-radius: 50%;padding: 5px;
                height: 10px;width: 10px;background-color: #4ea4f9;"></image>&nbsp;&nbsp;
                <image v-else src="http://www.douluodalu.icu:9000/school/static/woman.png" style="border-radius: 50%;padding: 5px;
                height: 10px;width: 10px;background-color: #f59bad;"></image>
              </navigator>
                <u-line color="rgba(192,192,192,0.1)" ></u-line>
            </u-list-item>
          </u-list>
  </view>
</template>

<script>
import Blog from "@/components/Blog.vue";
import {getLikeUsers} from "@/api/comment";
import {deleteNotification} from "@/api/notification";

export default {
  components: {Blog},
  data() {
    return {
      show: false,
      indexList: [],
      notifyIndex: 0,
      messageType: [
        {type: 1, name: '全部消息', url: 'https://www.douluodalu.icu:9000/school/static/all_msg.png'},
        {type: 2, name: '回复我的', url: 'https://www.douluodalu.icu:9000/school/static/all_reply.png'},
        {type: 3, name: '点赞', url: 'https://www.douluodalu.icu:9000/school/static/all_like.png'}
      ],
      urls: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ],
      tagIndex: 0,
      lineBg: "",
      comment:{},
      isComment:false,
      post:{},
      list4: [
        {name: '提醒'},
        {name: '私信',}],
    };
  },
  onLoad(options) {
    this.getLikeUsers(options.id)
  },
  methods: {
    toUserInfo(userId){
      uni.navigateTo({
        url: '/pages/my/userInfo?id=' + userId
      })
    },
    notifyChoose(index){
      this.notifyIndex = index
      this.show = false
    },
    async getLikeUsers(id){
      const res = await getLikeUsers(id)
      console.log(res)
      if(res.code === 200 && res.data?.comment !== undefined){
        this.indexList = res.data.users
        this.comment = res.data.comment
        this.isComment = true
      }else  if(res.code === 200 && res.data?.post !== undefined){
        this.indexList = res.data.users
        this.post = res.data.post
      }else {
        uni.showToast({
          title: '内容不存在',
          icon: 'none',
          duration: 2000
        })
        await deleteNotification(id)
        setTimeout(() => {
          uni.navigateBack({
            delta:1
          })
        }, 500)
      }

    },
    openPopup(popupData) {
      this.popupData = popupData
      uni.$u.sleep().then(() => {
        this.show = !this.show
      })
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false
      // console.log('close');
    },
    scrolltolower() {
      this.loadmore()
    },
    loadmore() {
      for (let i = 0; i < 30; i++) {
        this.indexList.push({
          url: this.urls[uni.$u.random(0, this.urls.length - 1)]
        })
      }
    },
    toSearch() {
      uni.navigateTo({url: '/pages/search/search'})
    },
    toTopic() {
      uni.navigateTo({url: '/pages/topic/AllTopic'})
    },
    toScroll(event) {
      this.tagIndex = event.index
    },
    swiperChange(event) {
      this.tagIndex = event.detail.current
    },
  },
  created() {
  },
};
</script>

<style>
.triangle {
  position: absolute;
  bottom: -17rpx;
  left: 100rpx;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 12px solid rgba(192,192,192,0.17);
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -moz-transform: rotate(180deg); /* Firefox */
  -ms-transform: rotate(180deg); /* IE 9 */
  -o-transform: rotate(180deg); /* Opera */
}
</style>
